<template>
  <div class="property-config">
    <template v-for="key in optionKeys" :key="key">
      <div class="control-item">
        <h3 class="control-item-label">
          {{ controls[key].name }}
          <span class="must" v-if="key === 'dataTitle'">*</span>
          <template v-if="controls[key].prompt">
            <a-tooltip :title="controls[key].prompt" placement="top">
              <rb-icon type="icon-luoshu-description" />
            </a-tooltip>
          </template>
        </h3>
        <component
          :is="controls[key].uiType"
          v-bind="controls[key].propData"
          :value="controls[key].defaultValue"
          :controlKey="controls[key].key"
          :card="card"
          :controls="controls"
          :formCards="formCards"
          @updateValue="updateValue"
        ></component>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import InputControl from '@/components/control/Input.vue';
import InputNumberControl from '@/components/control/InputNumber.vue';
import DatetimeControl from '@/components/control/Datetime.vue';
import SelectControl from '@/components/control/Select.vue';
import SelecTiledtListControl from '@/components/control/SelecTiledtList.vue';
import SwitchControl from '@/components/control/Switch.vue';
import SwitchListControl from '@/components/control/SwitchList.vue';
import TextareaControl from '@/components/control/Textarea.vue';
import MultiSelectControl from '@/components/control/MultiSelect.vue';
import FormatNumberControl from '@/components/control/FormatNumber.vue';
import RadioGroupControl from '@/components/control/RadioGroup.vue';
import LayoutPercentControl from '@/components/control/LayoutPercent.vue';
import ActionHandlerControl from '@/components/control/ActionHandlerControl.vue';
import ActionAuthControl from '@/components/control/ActionAuthControl.vue';
import ActionBtnControl from '@/components/control/ActionBtnControl.vue';
import MessageNoticeControl from '@/components/control/MessageNoticeControl.vue';
import HandlerTimeControl from '@/components/control/HandlerTimeControl.vue';

export default defineComponent({
  name: 'PropertyConfig',
  components: {
    InputControl,
    InputNumberControl,
    DatetimeControl,
    SelectControl,
    SelecTiledtListControl,
    SwitchControl,
    SwitchListControl,
    TextareaControl,
    MultiSelectControl,
    FormatNumberControl,
    RadioGroupControl,
    LayoutPercentControl,
    ActionHandlerControl,
    ActionAuthControl,
    ActionBtnControl,
    MessageNoticeControl,
    HandlerTimeControl,
  },
  props: {
    formCards: {
      type: Array,
      default: () => [],
    },
    flowNodes: {
      type: Array,
      default: () => [],
    },
    card: {
      type: Object,
      default: () => ({}),
    },
    controls: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(prop, context) {
    const optionKeys = computed(() => {
      return Object.keys(prop.controls).sort(
        (a: any, b: any) => prop.controls[a].pos - prop.controls[b].pos,
      );
    });
    const updateValue = (val: any, key: string, controls: any) => {
      if (key === '') {
        // todo
      } else {
        controls[key].defaultValue = val;
        context.emit('updateValue', val, key);
      }
    };

    return {
      optionKeys,
      updateValue,
    };
  },
});
</script>
<style lang="less" scoped>
.property-config {
  padding: 0 16px;
  .control-item {
    margin-bottom: 20px;
    &-label {
      margin-bottom: 8px;
      font-weight: 600;
      line-height: 20px;
    }
    .must {
      color: @rb-error-color;
    }
  }
}
</style>
